<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父元素方法传值给子元素</title>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js"></script>    
</head>
<body>
    <div id="app">
        <ul>
            <school v-for="item,index in schoolList" :school-name="item" :action="chooseEvent"  :key="'xlb'+index"></school>            
        </ul>
        <h2>选中的学校是：{{chooseSchool}}</h2>
    </div>

    

    <script>
        Vue.component("school",{
            props:['schoolName','index','action'],
            template:`<li>
                <h3>{{index}}--学校名称：{{schoolName}}</h3>
                <button @click="chooseEvent(schoolName)">选择学校</button>
            </li>`,
            methods:{
                chooseEvent:function(schoolName){
                    this.$parent.chooseEvent(schoolName);
                }
            }
        })

        let App=new Vue({
            el:"#app",
            data:{
                schoolList:['清华','北大','哈佛','牛津','浙大','中大'],
                chooseSchool:'',
                productlist:[
                    {"Id":1,"DrugTitle":"黄连上清片","DrugPrice":"10","DrugSpecifications":"规格","DrugComponent":"药品成分","FunctionalIndications":"功能主治","PointsForAttention":"注意事项"},
                    {"Id":2,"DrugTitle":"牛黄解毒丸","DrugPrice":"11","DrugSpecifications":"规格","DrugComponent":"药品成分","FunctionalIndications":"功能主治","PointsForAttention":"注意事项"},
                    {"Id":3,"DrugTitle":"六味地黄丸","DrugPrice":"12","DrugSpecifications":"规格","DrugComponent":"药品成分","FunctionalIndications":"功能主治","PointsForAttention":"注意事项"},
                    {"Id":4,"DrugTitle":"黄连上清片","DrugPrice":"13","DrugSpecifications":"规格","DrugComponent":"药品成分","FunctionalIndications":"功能主治","PointsForAttention":"注意事项"},
                    {"Id":5,"DrugTitle":"黄连上清片","DrugPrice":"14","DrugSpecifications":"规格","DrugComponent":"药品成分","FunctionalIndications":"功能主治","PointsForAttention":"注意事项"},
                    {"Id":6,"DrugTitle":"黄连上清片","DrugPrice":"12","DrugSpecifications":"规格","DrugComponent":"药品成分","FunctionalIndications":"功能主治","PointsForAttention":"注意事项"},
                    {"Id":7,"DrugTitle":"黄连上清片","DrugPrice":"16","DrugSpecifications":"规格","DrugComponent":"药品成分","FunctionalIndications":"功能主治","PointsForAttention":"注意事项"},
                    {"Id":8,"DrugTitle":"黄连上清片","DrugPrice":"12","DrugSpecifications":"规格","DrugComponent":"药品成分","FunctionalIndications":"功能主治","PointsForAttention":"注意事项"},
                    {"Id":9,"DrugTitle":"黄连上清片","DrugPrice":"20","DrugSpecifications":"规格","DrugComponent":"药品成分","FunctionalIndications":"功能主治","PointsForAttention":"注意事项"}
                ]
            },
            methods:{
                chooseEvent:function(schoolName){
                    console.log(schoolName)
                    this.chooseSchool=schoolName;
                }
            }
        })
    </script>
</body>
</html>